<template>
    <div style="display: flex;width: 100%;height: 100vh;">
        <!-- 右边 -->
        <div style="width: 300px;color: rgb(12, 21, 29); min-height: 100%;">
            <!-- 组件名 -->
            <div style="display:flex ;">
                <h2
                    style="margin-top: 10px;margin-left: 30px;width: 130px;text-align: center;background-color:rgb(240, 20, 31);">
                    {{ 组件名 }}</h2>
                <el-button size="small" style="margin-top: 20px;margin-left: 30px;" @click="重置组件">重置组件</el-button>
            </div>
            <div style="height: 90%;">
                <!-- 属性 -->
                <el-scrollbar height="100%">
                    <!-- 选中项绑定值 -->
                    <div :style='样式1'>
                        <h4>选中项绑定值 : </h4>
                        <spen :style='样式2'>英:v-model,类型:string / number / boolean / object / array,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["v-model"]' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- 是否多选 -->
                    <div :style='样式1'>
                        <h4>多选 : </h4>
                        <spen :style='样式2'>英:multiple,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.multiple' size='small'
                            @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否禁用 -->
                    <div :style='样式1'>
                        <h4>禁用 : </h4>
                        <spen :style='样式2'>英:disabled,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.disabled' size='small'
                            @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 作为 value 唯一标识的键名，绑定值为对象类型时必填 -->
                    <div :style='样式1'>
                        <h4>作为 value 唯一标识的键名，绑定值为对象类型时必填 : </h4>
                        <spen :style='样式2'>英:value-key,类型:string,默认:value</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["value-key"]' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- 输入框尺寸 -->
                    <div :style='样式1'>
                        <h4>尺寸 : </h4>
                        <spen :style='样式2'>英:size,类型:enum,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.size' size='small'
                            @change="提交改变">
                            <el-radio label="large">大 </el-radio>
                            <el-radio label="default">中 </el-radio>
                            <el-radio label="small">小</el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否可以清空选项 -->
                    <div :style='样式1'>
                        <h4>可以清空选项 : </h4>
                        <spen :style='样式2'>英:clearable,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.clearable' size='small'
                            @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 多选时是否将选中值按文字的形式展示 -->
                    <div :style='样式1'>
                        <h4>多选时是否将选中值按文字的形式展示 : </h4>
                        <spen :style='样式2'>英:collapse-tags,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["collapse-tags"]'
                            size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true -->
                    <div :style='样式1'>
                        <h4>当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true : </h4>
                        <spen :style='样式2'>英:collapse-tags-tooltip,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["collapse-tags-tooltip"]'
                            size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制 -->
                    <div :style='样式1'>
                        <h4>multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制 : </h4>
                        <spen :style='样式2'>英:multiple-limit,类型:number,默认:0</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["multiple-limit"]'
                            size='small' @change="提交改变">
                            <el-radio label=5>有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Select 输入框的原生 name 属性 -->
                    <div :style='样式1'>
                        <h4>Select 输入框的原生 name 属性 : </h4>
                        <spen :style='样式2'>英:name,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.name' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- tooltip 主题，内置了 dark / light 两种 -->
                    <div :style='样式1'>
                        <h4>tooltip 主题，内置了 dark / light 两种 : </h4>
                        <spen :style='样式2'>英:effect,类型:enum / string,默认:light</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.effect' size='small'
                            @change="提交改变">
                            <el-radio label="dark">dark </el-radio>
                            <el-radio label="light">light </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Select 输入框的原生 autocomplete 属性 -->
                    <div :style='样式1'>
                        <h4>Select 输入框的原生 autocomplete 属性 : </h4>
                        <spen :style='样式2'>英:autocomplete,类型:string,默认:off</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.autocomplete' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- 占位符，默认为“Select” -->
                    <div :style='样式1'>
                        <h4>占位符，默认为“Select” : </h4>
                        <spen :style='样式2'>英:placeholder,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.placeholder' size='small'
                            @change="提交改变">
                            <el-radio label="查询">有例子 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- Select 组件是否可筛选 -->
                    <div :style='样式1'>
                        <h4>Select 组件是否可筛选 : </h4>
                        <spen :style='样式2'>英:filterable,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.filterable' size='small'
                            @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否允许用户创建新条目， 只有当 filterable 设置为 true 时才会生效。 -->
                    <div :style='样式1'>
                        <h4>是否允许用户创建新条目， 只有当 filterable 设置为 true 时才会生效。 : </h4>
                        <spen :style='样式2'>英:allow-create,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["allow-create"]'
                            size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 自定义筛选方法 -->
                    <div :style='样式1'>
                        <h4>自定义筛选方法 : </h4>
                        <spen :style='样式2'>英:filter-method,类型:Function,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["filter-method"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 其中的选项是否从服务器远程加载 -->
                    <div :style='样式1'>
                        <h4>其中的选项是否从服务器远程加载 : </h4>
                        <spen :style='样式2'>英:remote,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.remote' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- 自定义远程搜索方法 -->
                    <div :style='样式1'>
                        <h4>自定义远程搜索方法 : </h4>
                        <spen :style='样式2'>英:remote-method,类型:Function,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["remote-method"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 远程搜索方法显示后缀图标 -->
                    <div :style='样式1'>
                        <h4>远程搜索方法显示后缀图标 : </h4>
                        <spen :style='样式2'>英:remote-show-suffix,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["remote-show-suffix"]'
                            size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否正在从远程获取数据 -->
                    <div :style='样式1'>
                        <h4>是否正在从远程获取数据 : </h4>
                        <spen :style='样式2'>英:loading,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.loading' size='small'
                            @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 从服务器加载数据时显示的文本，默认为“Loading” -->
                    <div :style='样式1'>
                        <h4>从服务器加载数据时显示的文本，默认为“Loading” : </h4>
                        <spen :style='样式2'>英:loading-text,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["loading-text"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 搜索条件无匹配时显示的文字，也可以使用 empty 插槽设置，默认是 “No matching data'” -->
                    <div :style='样式1'>
                        <h4>搜索条件无匹配时显示的文字，也可以使用 empty 插槽设置，默认是 “No matching data'” : </h4>
                        <spen :style='样式2'>英:no-match-text,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["no-match-text"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 无选项时显示的文字，也可以使用 empty 插槽设置自定义内容，默认是 “No data” -->
                    <div :style='样式1'>
                        <h4>无选项时显示的文字，也可以使用 empty 插槽设置自定义内容，默认是 “No data” : </h4>
                        <spen :style='样式2'>英:no-data-text,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["no-data-text"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 选择器下拉菜单的自定义类名 -->
                    <div :style='样式1'>
                        <h4>选择器下拉菜单的自定义类名 : </h4>
                        <spen :style='样式2'>英:popper-class,类型:string,默认:null</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["popper-class"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 当 multiple 和 filter被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词 -->
                    <div :style='样式1'>
                        <h4>当 multiple 和 filter被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词 : </h4>
                        <spen :style='样式2'>英:reserve-keyword,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["reserve-keyword"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 是否在输入框按下回车时，选择第一个匹配项。 需配合 filterable 或 remote 使用 -->
                    <div :style='样式1'>
                        <h4>是否在输入框按下回车时，选择第一个匹配项。 需配合 filterable 或 remote 使用 : </h4>
                        <spen :style='样式2'>英:default-first-option,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["default-first-option"]'
                            size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 是否将下拉列表插入至 body 元素 -->
                    <div :style='样式1'>
                        <h4>是否将下拉列表插入至 body 元素 : </h4>
                        <spen :style='样式2'>英:teleported,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.teleported' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- 当下拉选择器未被激活并且persistent设置为false，选择器会被删除。 -->
                    <div :style='样式1'>
                        <h4>当下拉选择器未被激活并且persistent设置为false，选择器会被删除。 : </h4>
                        <spen :style='样式2'>英:persistent,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.persistent' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- 对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 -->
                    <div :style='样式1'>
                        <h4>对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单 : </h4>
                        <spen :style='样式2'>英:automatic-dropdown,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["automatic-dropdown"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 自定义清除图标 -->
                    <div :style='样式1'>
                        <h4>自定义清除图标 : </h4>
                        <spen :style='样式2'>英:clear-icon,类型:string / object,默认:CircleClose</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["clear-icon"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 下拉框的宽度是否与输入框相同 -->
                    <div :style='样式1'>
                        <h4>下拉框的宽度是否与输入框相同 : </h4>
                        <spen :style='样式2'>英:fit-input-width,类型:boolean,默认:FALSE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["fit-input-width"]'
                            size='small' @change="提交改变">
                            <el-radio :label="true">是 </el-radio>
                            <el-radio :label="false">否 </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 自定义后缀图标组件 -->
                    <div :style='样式1'>
                        <h4>自定义后缀图标组件 : </h4>
                        <spen :style='样式2'>英:suffix-icon,类型:string / object,默认:ArrowDown</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["suffix-icon"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 下拉菜单显示/消失时后缀图标的动画 -->
                    <div :style='样式1'>
                        <h4>下拉菜单显示/消失时后缀图标的动画 : </h4>
                        <spen :style='样式2'>英:suffix-transition,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["suffix-transition"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 标签类型 -->
                    <div :style='样式1'>
                        <h4>标签类型 : </h4>
                        <spen :style='样式2'>英:tag-type,类型:enum,默认:info</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["tag-type"]' size='small'
                            @change="提交改变"></el-radio-group></div>
                    <!-- 是否触发表单验证 -->
                    <div :style='样式1'>
                        <h4>是否触发表单验证 : </h4>
                        <spen :style='样式2'>英:validate-event,类型:boolean,默认:TRUE</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["validate-event"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 下拉框出现的位置 -->
                    <div :style='样式1'>
                        <h4>下拉框出现的位置 : </h4>
                        <spen :style='样式2'>英:placement,类型:enum,默认:bottom-start</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性.placement' size='small'
                            @change="提交改变">
                            <el-radio label="top">top </el-radio>
                            <el-radio label="top-start">top-start </el-radio>
                            <el-radio label="top-end">top-end </el-radio>
                            <el-radio label="bottom">bottom </el-radio>
                            <el-radio label="bottom-start">bottom-start </el-radio>
                            <el-radio label="bottom-end">bottom-end </el-radio>
                            <el-radio label="left">left </el-radio>
                            <el-radio label="left-start">left-start </el-radio>
                            <el-radio label="left-end">left-end </el-radio>
                            <el-radio label="right">right </el-radio>
                            <el-radio label="right-start">right-start </el-radio>
                            <el-radio label="right-end">right-end </el-radio>
                            <el-radio :label=null>无</el-radio>
                        </el-radio-group></div>
                    <!-- 需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。 -->
                    <div :style='样式1'>
                        <h4>需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。 : </h4>
                        <spen :style='样式2'>英:max-collapse-tags,类型:number,默认:1</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["max-collapse-tags"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- popper.js 参数 -->
                    <div :style='样式1'>
                        <h4>popper.js 参数 : </h4>
                        <spen :style='样式2'>英:popper-options,类型:objectrefer to popper.js doc,默认:{}</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["popper-options"]'
                            size='small' @change="提交改变"></el-radio-group></div>
                    <!-- 等价于原生 input aria-label 属性 -->
                    <div :style='样式1'>
                        <h4>等价于原生 input aria-label 属性 : </h4>
                        <spen :style='样式2'>英:aria-label,类型:string,默认:—</spen><br>
                    </div>
                    <div style='text-align: left; margin-left: 30px;'><el-radio-group v-model='属性["aria-label"]'
                            size='small' @change="提交改变"></el-radio-group></div>


                </el-scrollbar>

            </div>
        </div>
        <!-- 左边 -->
        <div style="width: calc(100vw - 300px);;background-color: rgb(160, 178, 194); text-align: center;height: 99%;">
            <el-select v-model="绑定值" v-bind="属性" style="margin-top: 20px;width: 50%;"   @change='选择事件'>
                <el-option v-for="item in 选项列表" :key="item.value" :label="item.label" :value="item.value"
                    :disabled="item.disabled" />
            </el-select>
            <el-input v-model="代码" :autosize="{ minRows: 5, maxRows: 50 }" type="textarea" placeholder="代码展示"
                style="width: 98%;margin-top: 50px;" />
        </div>
    </div>
</template>
<script setup>

import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
import { ElMessage, formItemContextKey, ElMessageBox } from 'element-plus'
import { ref, reactive,  } from 'vue'
import{getCurrentInstance} from 'vue'
const { proxy } = getCurrentInstance();
const 提交方法 = proxy.API.提交方法 //提交方法('方法名',.....其他参数)
const ws广播 = proxy.API.监听ws广播 //监听ws广播('方法名',function(参数)) //广播 就是所有用户都会收到
const ws标识 = proxy.API.监听ws标识 //监听ws标识('方法名','标识',function(参数)) // 标识 相同标识的都会收到  比如多用户账号指定某账号  和 账号多处登录
const 跳转路由 =proxy.router

const 选择事件=()=>{console.log(绑定值.value)}

const 绑定值 = ref('')
  const 选项列表 = [
	{
	  value: 'Option1',
	  label: 'Option1',
	},
	{
	  value: 'Option2',
	  label: 'Option2',
	  disabled: true,
	},
	{
	  value: 'Option3',
	  label: 'Option3',
	},
	{
	  value: 'Option4',
	  label: 'Option4',
	},
	{
	  value: 'Option5',
	  label: 'Option5',
	},
  ]


const 代码 = ref('')
const 提交改变=async()=>{
    let 结果=await 提交方法("组件修改",组件名.value,属性.value)
    代码.value=结果
}





const 组件名 = ref('下拉选择器')
const 属性 = ref({
    multiple:null,//是否多选
    disabled:null,//是否禁用
    'value-key':null,//作为 value 唯一标识的键名，绑定值为对象类型时必填
    size:null,//输入框尺寸
    clearable:null,//是否可以清空选项
    'collapse-tags':null,//多选时是否将选中值按文字的形式展示
    'collapse-tags-tooltip':null,//当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true
   'multiple-limit':null,//multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制
    name:null,//Select 输入框的原生 name 属性
    effect:null,//tooltip 主题，内置了 dark / light 两种
    autocomplete:null,//Select 输入框的原生 autocomplete 属性
    placeholder:null,//占位符，默认为“Select”
    filterable:null,//Select 组件是否可筛选
   'allow-create':null,//是否允许用户创建新条目， 只有当 filterable 设置为 true 时才会生效。
  'filter-method':null,//自定义筛选方法
    remote:null,//其中的选项是否从服务器远程加载
     'remote-method':null,//自定义远程搜索方法
    'remote-show-suffix':null,//远程搜索方法显示后缀图标
    loading:null,//是否正在从远程获取数据
   'loading-text':null,//从服务器加载数据时显示的文本，默认为“Loading”
    'no-match-text':null,//搜索条件无匹配时显示的文字，也可以使用 empty 插槽设置，默认是 “No matching data'”
    'no-data-text':null,//无选项时显示的文字，也可以使用 empty 插槽设置自定义内容，默认是 “No data”
    'popper-class':null,//选择器下拉菜单的自定义类名
    'reserve-keyword':null,//当 multiple 和 filter被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词
    'default-first-option':null,//是否在输入框按下回车时，选择第一个匹配项。 需配合 filterable 或 remote 使用
    teleported:null,//是否将下拉列表插入至 body 元素
    persistent:null,//当下拉选择器未被激活并且persistent设置为false，选择器会被删除。
    'automatic-dropdown':null,//对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单
    'clear-icon':null,//自定义清除图标
    'fit-input-width':null,//下拉框的宽度是否与输入框相同
    'suffix-icon':null,//自定义后缀图标组件
    'suffix-transition':null,//下拉菜单显示/消失时后缀图标的动画
   'tag-type':null,//标签类型
    'validate-event':null,//是否触发表单验证
    placement:null,//下拉框出现的位置
    'max-collapse-tags':null,//需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。
    'popper-options':null,//popper.js 参数
    'aria-label':null,//等价于原生 input aria-label 属性
})

const 重置组件=()=>{
    let 原生属性 = {
        multiple:null,//是否多选
    disabled:null,//是否禁用
    'value-key':null,//作为 value 唯一标识的键名，绑定值为对象类型时必填
    size:null,//输入框尺寸
    clearable:null,//是否可以清空选项
    'collapse-tags':null,//多选时是否将选中值按文字的形式展示
    'collapse-tags-tooltip':null,//当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true
   'multiple-limit':null,//multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制
    name:null,//Select 输入框的原生 name 属性
    effect:null,//tooltip 主题，内置了 dark / light 两种
    autocomplete:null,//Select 输入框的原生 autocomplete 属性
    placeholder:null,//占位符，默认为“Select”
    filterable:null,//Select 组件是否可筛选
   'allow-create':null,//是否允许用户创建新条目， 只有当 filterable 设置为 true 时才会生效。
  'filter-method':null,//自定义筛选方法
    remote:null,//其中的选项是否从服务器远程加载
     'remote-method':null,//自定义远程搜索方法
    'remote-show-suffix':null,//远程搜索方法显示后缀图标
    loading:null,//是否正在从远程获取数据
   'loading-text':null,//从服务器加载数据时显示的文本，默认为“Loading”
    'no-match-text':null,//搜索条件无匹配时显示的文字，也可以使用 empty 插槽设置，默认是 “No matching data'”
    'no-data-text':null,//无选项时显示的文字，也可以使用 empty 插槽设置自定义内容，默认是 “No data”
    'popper-class':null,//选择器下拉菜单的自定义类名
    'reserve-keyword':null,//当 multiple 和 filter被设置为 true 时，是否在选中一个选项后保留当前的搜索关键词
    'default-first-option':null,//是否在输入框按下回车时，选择第一个匹配项。 需配合 filterable 或 remote 使用
    teleported:null,//是否将下拉列表插入至 body 元素
    persistent:null,//当下拉选择器未被激活并且persistent设置为false，选择器会被删除。
    'automatic-dropdown':null,//对于不可搜索的 Select，是否在输入框获得焦点后自动弹出选项菜单
    'clear-icon':null,//自定义清除图标
    'fit-input-width':null,//下拉框的宽度是否与输入框相同
    'suffix-icon':null,//自定义后缀图标组件
    'suffix-transition':null,//下拉菜单显示/消失时后缀图标的动画
   'tag-type':null,//标签类型
    'validate-event':null,//是否触发表单验证
    placement:null,//下拉框出现的位置
    'max-collapse-tags':null,//需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。
    'popper-options':null,//popper.js 参数
    'aria-label':null,//等价于原生 input aria-label 属性
    }
    属性.value=原生属性
    提交改变()
}


const 样式1 = ref('display: flex;margin-top: 10px;margin-left: 5px;font-size: 14px;border: 1px solid #ccc;width:95%')
const 样式2 = ref('color:rgb(190, 161, 161);font-size: 10px;margin-left: 10px;')






</script>
<style   scoped></style>
